<script setup>
  import { reactive } from 'vue'

  const props = defineProps({
    maxRate: {
      type: Number,
      default: 5
    },
    modelValue: Number,
    extraMsg: String,     //多个值绑定时可作为v-model的参数
  })

  let clickCount = 0

  const emit = defineEmits(['update:modelValue', 'update:extraMsg'])

  function changeRate(rate){
    clickCount++
    emit('update:modelValue', rate)
    changeExtraMsg()
  }

  const regex = /click Count\([0-9]+\)/g

  function changeExtraMsg() {
    let msg = ''
    if (regex.test(props.extraMsg)) {
      msg = props.extraMsg.replace(regex, `click Count(${clickCount})`)
    }else{
      msg = props.extraMsg + ` - click Count(${clickCount})`
    }
    emit('update:extraMsg', msg)
  }

  //change rate style
  let baseSize = 6
  let rateStyle = reactive({
    width: '12px',
    height: '12px',
    borderRadius: '6px',
    lineHeight: '12px'
  })

  function changeStyle(){
    baseSize++
    rateStyle.width = (baseSize *2) + 'px'
    rateStyle.height = (baseSize *2) + 'px'
    rateStyle.borderRadius = baseSize + 'px'
    rateStyle.lineHeight   = (baseSize *2) + 'px'
  }

</script>

<template>
  <div class="indicator">
    <span class="rate"
        v-for="idx in maxRate"
        :key="idx"
        :class="{active: idx <= modelValue}"
        :style="rateStyle"
        @click="changeRate(idx)"></span>
    <span id="extra" style="margin-left: 10px;">{{extraMsg}}</span> 
  </div>
  <br>
  <button @click="changeStyle">更改样式</button>   
</template>

<style scoped>

.indicator {
  display: flex;
}

.rate {
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  border: 1px solid #999;
  background-color: #fff;
  line-height: 12px;
  text-align: center;
  font-size: 12px;
  margin: 0 8px;
}

.rate.active {
  border: 0;
  background-color: rgba(212,62,46,1.0);
}

</style>